<template>
  <div>
    <div class="goods">
      <!--侧栏-->
      <div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}"
              @click="selectMenu(index,$event)">
            <span class="text border-1px">
              <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
            </span>
          </li>
        </ul>
      </div>
      <!--商品列表-->
      <div class="foods-wrapper" ref="foodWrapper">
        <ul>
          <li v-for="item in goods" class="food-list food-list-hook">
            <h1 class="title">{{item.name}}</h1>
            <ul>
              <li @click="selectFood(food,$event)" v-for="food in item.foods" class="food-item border-1px">
                <div class="icon">
                  <img width="57" height="57" :src="food.icon" alt="">
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                    <div class="price">
                      <span class="now">¥{{food.price}}</span><span class="old"
                                                                    v-show="food.oldPrice">¥{{food.oldPrice}}</span>
                    </div>
                    <div class="cartcontrol-wrapper">
                      <cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol>
                    </div>
                  </div>
                </div>
              </li>
            </ul>

          </li>
        </ul>
      </div>
      <!--购物车-->
      <shopcart ref="shopcart" :select-foods="selectFoods" :deliveryPrice="seller.deliveryPrice"
                :minPrice="seller.minPrice"></shopcart>
    </div>
    <food :food="selectedFood" ref="food"></food>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll';
  import shopcart from '../../components/shopcart/shopcart';
  import cartcontrol from '../../components/cartcontrol/cartcontrol';
  import food from '../../components/food/food';

  const ERR_OK = 0;

  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data() {
      return {
        goods: [],
        listHeight: [],
        scrollY: 0,
        selectedFood: {}
      };
    },
    computed: {
      currentIndex() {
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i + 1];
          if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
            return i;
          }
        }
        return 0;
      },
      selectFoods() {
        let foods = [];
        this.goods.forEach((good) => {
          good.foods.forEach((food) => {
            if (food.count) {
              foods.push(food);
            }
          })
        });
        return foods;
      }
    },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];

      this.$http.get('/api/goods').then((response) => {
        //console.log(response.headers);
        response = response.data;//获取返回数据
        if (response.errno === ERR_OK) {
          this.goods = response.data;
          //console.log(response.data)
          this.$nextTick(() => {
            //滚动条
            this._initScroll();
            //计算高度
            this._calculateHeight();
          });
        }
      })
    },
    methods: {
      selectMenu(index, event) {
        if (!event._constructed) {
          return;
        }

        let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
        let el = foodList[index];
        //滚动到指定位置
        this.foodScroll.scrollToElement(el, 200);
      },
      selectFood(food, event) {
        if (!event._constructed) {
          return;
        }

        this.selectedFood = food;
        this.$refs.food.show();

      },
      cartAdd(target) {
        // vue2.0废弃了events和$dispatch,
        // 如何实现事件监听：被监听组件this.$emit('cart-add', event.target); 提交事件给父组件  父组件获取事件v-on:cart-add="cartAdd"
        // 通过cartAdd  获取并通知组件内的方法this.$refs.shopcart.drop(target);
        // 被通知组件 添加ref="shopcart"
        // dom元素更新后执行， 因此此处能正确打印出更改之后的值；
        this.$nextTick(() => {
          this.$refs.shopcart.drop(target);　//调用shopcart组件的drop()函数
        });

      },
      _initScroll() {
        this.meunScroll = new BScroll(this.$refs.menuWrapper, {
          click: true
        });

        this.foodScroll = new BScroll(this.$refs.foodWrapper, {
          click: true,
          //实时返回滚动位置
          probeType: 3
        });
        //获取滚动位置
        this.foodScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y));
        });
      },
      _calculateHeight() {
        let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          //递增的数组 记录每段的高度
          this.listHeight.push(height);
        }

      }
    },
    components: {
      shopcart,
      cartcontrol,
      food,
    },

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .goods
    display flex
    position absolute
    top 174px
    bottom 46px
    width 100%
    overflow hidden
    .menu-wrapper
      flex 0 0 80px
      width 80px
      background #f3f5f7
      .menu-item
        display table
        height 54px
        padding 0 12px
        line-height 14px
        &.current
          position relative
          z-index 10
          background #ffffff
          font-weight 700
          .text
            border-none()

        .icon
          display inline-block
          vertical-align top
          width 12px
          height 12px
          margin-right 2px
          background-size 12px 12px
          background-repeat no-repeat
          &.decrease
            bg-image('decrease_3')
          &.discount
            bg-image('discount_3')
          &.invoice
            bg-image('invoice_3')
          &.special
            bg-image('special_3')
          &.guarantee
            bg-image('guarantee_3')
        .text
          display table-cell
          width 56px
          vertical-align middle
          font-size 12px
          border-1px(rgba(7, 12, 27, 0.1))

    .foods-wrapper
      flex 1
      background #ffffff
      .title
        font-size 14px
        padding-left 14px
        height 26px
        line-height 26px
        color rgb(147, 153, 159)

    .food-item
      display flex
      margin 18px
      padding-bottom 18px
      border-1px(rgba(7, 12, 27, 0.1))
      &:last-child
        border-none()
        margin-bottom 0
      .icon
        flex 0 0 57px
        margin-right 10px
      .content
        flex 1
        .name
          margin 2px 0 8px 0
          height 14px
          line-height 14px
          font-size 14px
          color rgb(7, 17, 27)
        .desc, .extra
          line-height 10px
          font-size 10px
          color rgb(147, 153, 159)
        .desc
          line-height 12px
          margin-bottom 8px
        .extra
          .count
            margin-right 12px
        .price
          font-weight 700
          line-height 24px
          .now
            margin-right 8px
            font-size 14px
            color rgb(240, 20, 20)
          .old
            text-decoration line-through
            font-size 10px
            color rgb(147, 153, 159)
        .cartcontrol-wrapper
          position absolute
          right 0
          bottom 12px


</style>
